<template>
  <div class="home-container">
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="home-left">
          <el-row class="panel company-info">
            <div class="company-header">
              <div><i class="icon">图标</i></div>
              <div class="header-right">
                <div class="header">
                  苏州某某某科技股份有限公司 <i>体验版</i>
                </div>
                <div class="username">
                  <span>管理员</span>
                  <i>|</i>
                  <span>研究院-研发部</span>
                </div>
              </div>
            </div>
            <el-row class="all-show">
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
              <el-col>
                <el-row class="show-title">组织总人数</el-row>
                <el-row class="show-num">777</el-row>
              </el-col>
            </el-row>
          </el-row>
          <el-row class="panel quick-access">
            <div class="pannel-title">快捷入口</div>
            <div class="quick-entry">
              <div class="entry-item">
                <div class="entry entry-approval" />
                <span>假期审批</span>
              </div>
              <div class="entry-item">
                <div class="entry entry-socail" />
                <span>社保管理</span>
              </div>
              <div class="entry-item">
                <div class="entry entry-role" />
                <span>角色管理</span>
              </div>
              <div class="entry-item">
                <div class="entry entry-salary" />
                <span>添加员工</span>
              </div>
              <div class="entry-item">
                <div class="entry entry-bpm" />
                <span>添加权限</span>
              </div>
            </div>
          </el-row>
          <el-row class="panel chart">
            <div class="pannel-title">社保申报数据</div>
            <div class="pannel-container">
              <div class="chart-data">
                <div class="show-title">申报人数</div>
                <div class="show-num special">357</div>
                <el-row class="show-bottom">
                  <el-col :span="12">
                    <el-row class="show-title">待申报（人）</el-row>
                    <el-row class="show-num">171</el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="show-title">待申报中（人）</el-row>
                    <el-row class="show-num">171</el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="show-title">已申报（人）</el-row>
                    <el-row class="show-num">27</el-row>
                  </el-col>
                </el-row>
              </div>
              <div class="echarts">
                1
              </div>
            </div>
          </el-row>
          <el-row class="panel chart">
            <div class="pannel-title">标题</div>
            <div class="pannel-container">容器</div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="home-right">
          <el-row>
            <el-col :span="13">
              <div class="panel right-bar">
                <div class="item-header">
                  帮助链接
                </div>
                <router-link to="/">
                  <i class="icon-entry">图标</i>
                  <span>入门指南</span>
                </router-link>
                <router-link to="/">
                  <i>图标</i>
                  <span>在线帮助手册</span>
                </router-link>
                <router-link to="/">
                  <i>图标</i>
                  <span>联系技术支持</span>
                </router-link>
                <router-link to="/">
                  <i>图标</i>
                  <span>添加链接</span>
                </router-link>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="panel carlendar">
                <el-calendar />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div class="panel notify">
              通知公告
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date()
    }
  },
  mounted() {
    // const a = document.querySelector('')
    this.changeCalenderSpan()
  },
  methods: {
    changeCalenderSpan() {
      console.log('change', 1)
      const calTriggerArr = document.querySelectorAll('.el-button-group .el-button--mini')
      const calThArr = document.querySelectorAll('.el-calendar-table thead th')
      calTriggerArr[0].innerText = '<'
      calTriggerArr[2].innerText = '>'
      const weekArr = ['一', '二', '三', '四', '五', '六', '日']
      for (let i = 0; i < calThArr.length; i++) {
        calThArr[i].innerText = weekArr[i]
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
